<template>
  <VScroll
    ref="scroll"
    @scroll="scroll"
    class="content"
    :scrollX="enableScrollX"
    :listenScroll="true"
  >
    <div ref="containerList" :style="{width:containerWidth}" class="scroll-container-list">
      <slot></slot>
    </div>
  </VScroll>
</template>

<script>

  export default {
    // components: {scroll},
    name:'scroll-container',
    props: {
      listenShowNav: {
        type: Boolean,
        default: true
      },
      enableScrollX: {
        type: Boolean,
        default: false
      },
      containerWidth: {
        type: String,
        default: "100%"
      }
    },
    data() {
      return {
        scrollX: 0,
        scrollY: 0,
        bridge: this.$store.state.bridge
      };
    },
    methods: {
      scroll(pos, horizontal = false) {
        this.scrollY = pos.y;
        this.scrollX = pos.x;
        // console.log(this.scrollX );
        this.$emit("scroll", pos);
      },
      scrollBy(stepDist, horizontal = false) {
        let maxdist
        let dist
        if (horizontal) {
          const containerWidth = this.$refs.scroll.$el.offsetWidth;
          maxdist = containerWidth - this.$refs.containerList.offsetWidth;
          dist = this.scrollX + stepDist;
          if (dist > 0) {
            this.$refs.scroll.scrollTo(0, 0, 800);
          } else if (dist < maxdist) {
            this.$refs.scroll.scrollTo(maxdist, 0, 800);
          } else {
            this.$refs.scroll.scrollTo(dist, 0, 800);
          }
        } else {
          const containerHeight = this.$refs.scroll.$el.offsetHeight;
          maxdist = containerHeight - this.$refs.containerList.offsetHeight;
          dist = this.scrollY + stepDist;
          if (dist > 0 || maxdist > 0) {
            this.$refs.scroll.scrollTo(0, 0, 50);
          } else if (dist < maxdist) {
            this.$refs.scroll.scrollTo(0, maxdist, 50);
          } else {
            this.$refs.scroll.scrollTo(0, dist, 50);
          }
        }
      },
      scrollTo(targetIndex, horizontal = false, offset) {
        let target = targetIndex
          ? this.$refs.scroll.$el.querySelectorAll(
            "[data-index=tar_" + targetIndex + "]"
          )[0]
          : false;
        // console.log("target:", target);
        if (horizontal) {
          const containerWidth = this.$refs.scroll.$el.offsetWidth;
          let maxdist = containerWidth - this.$refs.containerList.offsetWidth;
          // console.log("target:", target);
          if (target) {
            let left =
              target.getBoundingClientRect().left -
              this.$refs.scroll.$el.getBoundingClientRect().left;
            let dist = containerWidth - left + this.scrollX;
            if (dist >= 0) {
              // console.log("left", dist);
              this.$refs.scroll.scrollTo(0, 0, 800);
              return;
            }
            dist = dist < maxdist ? maxdist : dist;
            this.$refs.scroll.scrollTo(dist, 0, 800);
          } else {
            // console.log("right");
            let dist = maxdist;
            if (dist < 0) {
              this.$refs.scroll.scrollTo(dist, 0, 800);
            }
          }
        } else {
          const containerHeight = this.$refs.scroll.$el.offsetHeight;
          // 最大滚动距离
          let maxdist = containerHeight - this.$refs.containerList.offsetHeight;
          // console.log("target:", target);
          if (target) {
            //目标到容器的高度
            let top =
              target.getBoundingClientRect().top -
              this.$refs.scroll.$el.getBoundingClientRect().top;
            //目标滚动的距离
            let dist = containerHeight - top + this.scrollY;
            if (dist >= 0) {
              // console.log("top", dist);
              this.$refs.scroll.scrollTo(0, 0, 800);
              if (this.listenShowNav)
                this.$store.commit("setNavigationShow", true);
              return;
            }
            // 判断有没有偏移位置
            if(offset && dist > offset ) dist = offset
            dist = dist < maxdist ? maxdist : dist;
            this.$refs.scroll.scrollTo(0, dist, 800);
            // 隐藏导航
            if (this.listenShowNav)
              this.$store.commit("setNavigationShow", false);
            // 如果视频在播状态,就停止
            // if (this.bridge.playState === true) this.bridge.closeVedio();
          } else {
            // console.log("bottom");
            let dist = maxdist;
            if (dist < 0) {
              this.$refs.scroll.scrollTo(0, dist, 800);
              if (this.listenShowNav)
                this.$store.commit("setNavigationShow", false);
              // if (this.bridge.playState === true) this.bridge.closeVedio();
            }
          }
        }
      }
    },
    created() {
      // console.log('listenShowNav:' + this.listenShowNav)
    },
    mounted() {
    }
  };
</script>

<style scoped lang="less">
  .content {
    position: relative;
    left: 0px;
    top:0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    .scroll-container-list{
       display: block;
    }
    .scroll-container-list:after{
      clear: both;
    }
  }
</style>
